<template>
  <view>
    <view class="userModel u-flex u-row-center u-col-center">
      <view class="cont u-flex-col u-col-center" :style="{width: ad?'300px':'520rpx'}">
        <image src="../../static/icon/jinbi.png"></image>
        <view class="text u-text-center u-content-color u-p-l-60 u-p-r-60" v-html="title"></view>
        <view class="btn u-text-center" hover-class="hover-class" hover-stay-time="50" v-if="authorize">
          {{btnText}}
          <!-- #ifdef MP-QQ -->
          <button open-type="getUserInfo" @click="getUserProfile" style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;opacity: 0;"></button>
          <!-- #endif -->
          <!-- #ifdef MP-WEIXIN -->
          <button open-type="getUserProfile" @click="getUserProfile" style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;opacity: 0;"></button>
          <!-- #endif -->

        </view>
        <view class="" v-else-if="ad">
          <view class="u-p-t-20" style="width: 300px;">
            <!-- #ifdef MP-QQ -->
            <ad unit-id="8aa061ea8e5bac1c717623a7be7badd8"></ad>
            <!-- #endif -->
            <!-- #ifdef MP-WEIXIN -->
            <ad unit-id="adunit-8e509190606cd228"></ad>
            <!-- #endif -->
          </view>
          <view class="btn u-text-center adClass" hover-class="hover-class" hover-stay-time="50" style="margin-left: 20%;margin-top: 30rpx;">
            {{btnText}}
            <button open-type="share" style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;opacity: 0;"></button>
          </view>
        </view>
        <view class="btn u-text-center" hover-class="hover-class" hover-stay-time="50" v-else @click="save">
          {{btnText}}
        </view>
        <view v-if="closeText!=' '" class="no u-text-center u-p-t-30" @click="close">{{closeText}}</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'model',
  props:{
    title:{	//显示的内容
      type: String,
      default: '为了更好的浏览体验，快去授权登录吧'
    },
    authorize:{	//是否授权登录
      type: Boolean,
      default: true
    },
    ad:{	//广告
      type: Boolean,
      default: false
    },
    btnText:{	//按钮文字
      type: String,
      default: '授权登录'
    },
    closeText:{	//关闭文笔
      type: String,
      default: '暂时不用'
    }
  },
  data() {
    return {

    };
  },
  methods: {
    save(){
      this.$emit('save');
    },
    close(){
      this.$emit('close');
    },
    getUserProfile(event){
      this.$emit('getUserInfo');
    }
  }
}
</script>

<style lang="scss">
.userModel{
  z-index: 9999999;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0,0,0,0.6);
  // backdrop-filter: blur(4rpx);
  .cont{
    width: 520rpx;
    padding: 0px 0 50rpx 0;
    background-color: #FFFFFF;
    border-radius: 32rpx;
    image{
      width: 128rpx;
      height: 128rpx;
      margin-top: -60rpx;
      margin-bottom: 40rpx;
    }
    .text{
      line-height: 46rpx;
    }
    .btn{
      position: relative;
      margin-top: 50rpx;
      color: #FFFFFF;
      width: 60%;
      line-height: 80rpx;
      border-radius: 80rpx;
      background-image: linear-gradient(to bottom right, #fce03d , #f8c93c);
    }
    .no{
      color: #B8B8B8;
    }
  }
}
.num{
  font-size: 16px;
  font-weight: 700;
  color: #f8c93c;
  padding: 0 8rpx;
}

.adClass{
  animation: tiaobig 1.2s ease-in-out alternate infinite;
  // animation-iteration-count:1;
}
@keyframes tiaobig {
  25% {
    transform: scale(0.98);
  }
  50% {
    transform: scale(1.08);
  }
  75% {
    transform: scale(0.98);
  }
  100% {
    transform: scale(1.08);
  }
}
</style>
